<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item> 
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <tree-table :data="cateList" :columns = "columns" :selection-type ="false" :expand-type="false" show-index index-text="#" border :show-row-hover ="false" class="treeTable">
                <!-- 是否有效 -->
                <!-- eslint-disable-next-line -->
                <template slot="isok" slot-scope="slotprops">
                    <i class="el-icon-success" v-if="slotprops.row.cat_deleted === false" style="color:lightgreen"></i>
                    <i class="el-icon-error" v-else style="color:red"></i>
                </template>
                <!-- 排序 -->
                <!-- eslint-disable-next-line -->
                <template slot="order" slot-scope=" slotprops">
                    <el-tag size="mini" v-if ="slotprops.row.cat_level ==0">一级</el-tag>
                    <el-tag type="success" size="mini" v-else-if="slotprops.row.cat_level ==1">二级</el-tag>
                    <el-tag type="warning" size="mini" v-else   >三级</el-tag>
                </template>
                <!-- 操作 -->
                <!-- eslint-disable-next-line -->
                <template slot="opt" slot-scope="slotprops">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(slotprops.row.cat_id)"></el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="showRemoveDialog(slotprops.row.cat_id)"></el-button>
                </template>
            </tree-table>

            <!-- 分页区域 -->

             <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[1, 3, 5, 10,15]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>


        <!-- 添加分类对话框 -->
        <el-dialog title="添加分类" :visible.sync="addDialogVisible" width="50%" @close = "addCateDialogClosed">
            <!-- 添加分类的表单 -->

            <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
                <el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="addCateForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类: ：">
                    <!-- 级联  options 用来指定数据源 ，props -->
                    <!-- 更新之后出现bug -->
                     <el-cascader v-model="selectedKeys" :options="parentCateList" :props=" cascaderProps" @change="parentCateChange" clearable change-on-select>

                     </el-cascader>
                    <!-- <el-cascader v-model="selectedKeys" :options="parentCateList " :props="{ expandTrigger: 'hover' , value:'cat_id',label:'cat_name',children:'children'}" @change="handleChange"></el-cascader>-->
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 编辑用户对话框 -->
        <el-dialog title="编辑分类" :visible.sync="editDialogVisible" width="50%" @close= " editDialogClosed">
            <el-form :model="editCateForm" :rules="editCateFormRules" ref="editCateFormRef" label-width="100px">
                <el-form-item label="分类名称：" prop="cat_name">
                    <el-input v-model="editCateForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editCate">确 定</el-button>
            </span>
        </el-dialog>


    </div>
</template>


<script>

export default {
    data:function(){
        return {
            //查询条件
            queryInfo:{
                type:3,
                pagenum:1,
                pagesize:5
            },
            //商品分类的数据列表
            cateList:[],
            // 总数据条数
            total:0,
            // 为Table指定列的定义
            columns:[{
                label:'分类名称',
                prop:'cat_name'
            },{
                label:'是否有效',
                // 表示将当前列定义为模板列
                type:'template',
                //表示当前列使用的模板名称
                template:'isok'
            },{
                label:'排序',
                // 表示将当前列定义为模板列
                type:'template',
                //表示当前列使用的模板名称
                template:'order'
            },{
                label:'操作',
                // 表示将当前列定义为模板列
                type:'template',
                //表示当前列使用的模板名称
                template:'opt'

            }
            ],
            // 添加分类对话框的显示和隐藏
            addDialogVisible : false,
            //添加分类的表单数据对象
            addCateForm:{
                cat_name:'',
                // 父级分类的id
                cat_pid:0,
                //默认添加的分类等级为一级分类
                cat_level:0
            },
            //表单验证规则
            addCateFormRules:{
                cat_name:[
                    { required: true, message: '请输入分类名', trigger: 'blur'},
                ]
            },
            // 父级分类的数据列表
            parentCateList:[],
            // 指定级联选择器的配置对象
            cascaderProps:{
                expandTrigger:'hover',
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            //选中的父级分类的ID数组
            selectedKeys:[],
            // 添加分类对话框的显示和隐藏
            editDialogVisible : false,
            // 编辑分类的表单数据
            editCateForm:{
                cat_id:'',
                cat_name:''
            },
            //编辑分类表单验证规则
            editCateFormRules:{
                cat_name:[
                    { required: true, message: '请输入分类名', trigger: 'blur'},
                ]
            },
            // 添加分类对话框的显示和隐藏
            removeDialogVisible : false,
            // 编辑分类的表单数据
            removeCateForm:{
                cat_id:'',
                cat_name:''
            },
            //编辑分类表单验证规则
            removeCateFormRules:{
                cat_name:[
                    { required: true, message: '请输入分类名', trigger: 'blur'},
                ]
            }

        }
    },
    created() {
        this.getCateList()
    },
    methods:{
        // 获取商品分类数据
        getCateList:async function(){
            //get 传递数据对象 {params：obj}
            const {data:res} = await this.$http.get('categories',{
                params:this.queryInfo
            });
            // console.log(res);
            if(res.meta.status!=200){
                return this.$message.error('获取商品分类失败');
            }else{
                // console.log(res.data);
                // 把数据列表赋值给catelist
                this.cateList = res.data.result
                //总数据条数赋值给total
                this.total = res.data.total
            }
            
        },

        //分页功能
        // 监听pagesize改变的事件
        handleSizeChange:function(newSize){
            this.queryInfo.pagesize = newSize;
            this.getCateList();
        },
        // 监听pagenum的改变
        handleCurrentChange:function(newNum){
            this.queryInfo.pagenum = newNum,
            this.getCateList()
        },


        // 添加分类功能
        // 点击按钮展示添加分类对话框
        showAddDialog:function(){
            this.getParentCateList()
            this.addDialogVisible = true
        },
        // 获取父级分类的数据列表
        getParentCateList:async function(){
            const{data:res} = await this.$http.get('categories',{params:{type:2}});
            if(res.meta.status !=200){
                return this.$message.error('获取父级分类数据失败')
            }else{
                // console.log(res.data);
                this.parentCateList = res.data;
                // console.log(this.parentCateList);
            }
        },
        //选择项发生变化触发这个函数
        parentCateChange:function(){
           console.log(this.selectedKeys);
            //如果selectedKeys数组中的length大于0，证明选中了父级分类
            // 反之，就说明没有选中任何父级
            if(this.selectedKeys.length>0){
                // 父级分类的ID
                this.addCateForm.cat_pid =  this.selectedKeys[this.selectedKeys.length-1];
                //为当前分类的等级赋值
                this.addCateForm.cat_level = this.selectedKeys.length
                return
            }else{
                // 父级分类的ID
                this.addCateForm.cat_pid =  0;
                //为当前分类的等级赋值
                this.addCateForm.cat_level =0
                return
            }
        },
        //点击按钮，添加新的分类
        addCate: async  function(){
            //先进行表单预验证
            this.$refs.addCateFormRef.validate( async vaild =>{
                if(!vaild){return}
                else{
                    const {data:res} = await this.$http.post('categories',this.addCateForm)
                    console.log(res);
                    if(res.meta.status != 201){
                        this.$message.error('添加分类失败')
                    }else{
                        this.$message.success('添加分类成功')
                        this.getCateList;
                        this.addDialogVisible = false
                    }
                }
            })
            
        },
        // 监听对话框的关闭事件，重置对话框
        addCateDialogClosed:function(){
            this.$refs.addCateFormRef.resetFields();
            this.selectedKeys = [];
            this.addCateForm.cat_level = 0;
            this.addCateForm.car_id = 0
        },

        //编辑分类功能
        // 点击按钮展示编辑分类对话框
        showEditDialog: async function(id){
            const {data:res} = await this.$http.get(`categories/${id}`);
            // console.log(res);
            this.editCateForm.cat_name = res.data.cat_name
            this.editCateForm.cat_id = res.data.cat_id

            this.editDialogVisible = true
        },
        //点击按钮，提交编辑分类
        editCate:function(){
           this.$refs.editCateFormRef.validate( async vaild =>{
                if(!vaild){return}
                else{
                    const {data:res} = await this.$http.put(`categories/${this.editCateForm.cat_id}`,this.editCateForm)
                    console.log(res);
                    if(res.meta.status != 200){
                        this.$message.error('更新分类失败')
                    }else{
                        this.$message.success('更新分类成功')
                        this.getCateList();
                        this.editDialogVisible = false
                    }
                }
            })
        },
        //监听对话框关闭事件，充值对话框
        editDialogClosed: function(){
            this.$refs.editCateFormRef.resetFields();
        },

        //删除分类功能
        //点击按钮展示删除分类对话框
        showRemoveDialog: async function(id){
            const res = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).catch(error=>{
                    return error
                });
                if( res !='confirm'){
                    return this.$message.info('已经取消删除！')
                }else{
                     const {data:res} = await this.$http.delete(  `categories/${id}`);
                     if(res.meta.status !=200){
                    this.$message.error('删除失败！')
                }else{
                    this.$message.success('已经删除！');
                    this.getCateList();
                }
                }
        }

    }
}
</script>


<style lang="less" scoped>
    .treeTable {
        margin-top: 15px;
    }
    .el-cascader {
        width: 100%;
    }
</style>